<template>
	<div class="box" @click="gotodetail(item._id)">
		<div class="b_top">
			<div class="box_img">
				<img class="img img-fluid" :src="item.image" alt="" />
			</div>
			<div class="content">
				<div>
					<div class="title">{{ item.name }}</div>
					<div class="subtitle">
						{{ item.content | removehtml }}
					</div>
				</div>
				<div class="classify">
					<div v-for="(tag, index) in item.tags" :key="index">
						{{ tag }}
					</div>
				</div>
			</div>
		</div>

		<div class="b_footer">
			<div class="time">
				<img class="icon" src="@/assets/images//time.png" alt="" />
				{{ item.date | formTime }}
			</div>
			<div class="see">
				<img class="icon" src="@/assets/images//see.png" alt="" />{{
					item.number
				}}
			</div>
			<div class="love">
				<img
					class="icon"
					src="@/assets/images//love_active.png"
					alt=""
				/>{{ item.love }}
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "blog",
	props: {
		item: Object,
	},
	filters: {
		removehtml(val) {
			return val.replace(/<[^>]+>/g, "");
		},
	},
	methods: {
		// 跳转详情页
		gotodetail(id) {
			this.$router.push({ path: "/detail", query: { id } });
		},
	},
};
</script>

<style lang="scss" scoped>
.box {
	background: #fff;
	box-shadow: 0 0 20px -8px rgba(0, 0, 0, 0.2);
	padding: 20px;
	box-sizing: border-box;
	border-radius: 4px;
	cursor: pointer;
	.b_top {
		display: flex;
	}
	.box_img {
		width: 40%;
		.img {
			display: block;
			width: 100%;
			border-radius: 4px;
			aspect-ratio: 16/9;
			object-fit: cover;
		}
	}
	.content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-left: 10px;
		box-sizing: border-box;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
	}

	.subtitle {
		font-size: 14px;
		color: #666;
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-break: break-all;
	}

	.classify {
		display: flex;
		flex-wrap: wrap;
		font-size: 14px;
		color: #fff;
		margin-top: 6px;
		div {
			margin-right: 6px;
			padding: 2px 10px;
			box-sizing: border-box;
			background-color: #09463e;
			border-radius: 20px;
			margin-bottom: 4px;
		}
	}

	.b_footer {
		display: flex;
		margin-top: 6px;
		font-size: 14px;
		color: #666;
		.icon {
			display: block;
			width: 24px;
			margin-right: 4px;
		}

		.time,
		.see,
		.love {
			display: flex;
			align-items: center;
		}
		.see,
		.love {
			margin-left: 10px;
		}
	}
}
::v-deep .subtitle img {
	display: none !important;
}
::v-deep code[class*="language-"],
::v-deep pre[class*="language-"] {
	color: #666 !important;
	text-shadow: unset !important;
}
</style>
